<template>
    <div class="phone-box">
        <div class="calculotor">
            <div class="input-box">
                <div class="input-value">
                    {{ calArr.join(" ") }}
                </div>
            </div>
            <div class="cal-row">
                <div class="cal-btn red" @click="btnClick('C')">C</div>
                <div class="cal-btn red" @click="btnClick('⬅')">⬅</div>
                <div class="cal-btn red" @click="btnClick('㏒')">㏒</div>
                <div class="cal-btn red" @click="btnClick('÷')">÷</div>
            </div>
            <div class="cal-row">
                <div class="cal-btn" @click="btnClick('7')">7</div>
                <div class="cal-btn" @click="btnClick('8')">8</div>
                <div class="cal-btn" @click="btnClick('9')">9</div>
                <div class="cal-btn red" @click="btnClick('x')">x</div>
            </div>
            <div class="cal-row">
                <div class="cal-btn" @click="btnClick('4')">4</div>
                <div class="cal-btn" @click="btnClick('5')">5</div>
                <div class="cal-btn" @click="btnClick('6')">6</div>
                <div class="cal-btn red" @click="btnClick('-')">-</div>
            </div>
            <div class="cal-row">
                <div class="cal-btn" @click="btnClick('1')">1</div>
                <div class="cal-btn" @click="btnClick('2')">2</div>
                <div class="cal-btn" @click="btnClick('3')">3</div>
                <div class="cal-btn red" @click="btnClick('+')">+</div>
            </div>
            <div class="cal-row">
                <div class="cal-btn" @click="btnClick('%')">%</div>
                <div class="cal-btn" @click="btnClick('0')">0</div>
                <div class="cal-btn" @click="btnClick('.')">.</div>
                <div class="cal-btn red" @click="btnClick('=')">=</div>
            </div>
            <div class="foot-text">远舢® 计算器</div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            contentString: "99 + 100",
            calArr: []
        };
    },
    methods: {
        btnClick(sym) {
            if (!this.calArr.length) this.calArr.push("");
            switch (sym) {
                case ".":
                    if (this.calArr.at(-1).includes(".")) {
                        break;
                    }
                    if (this.calArr.at(-1) == "0") {
                        this.calArr.splice(
                            this.calArr.length - 1,
                            1,
                            `${this.calArr.at(-1)}${sym}`
                        );
                        break;
                    }
                case "1":
                case "2":
                case "3":
                case "4":
                case "5":
                case "6":
                case "7":
                case "8":
                case "9":
                case "0":
                    (this.calArr.at(-1).length != 1 ||
                        this.calArr.at(-1) != 0) &&
                    this.calArr.at(-1) != ""
                        ? this.calArr.splice(
                              this.calArr.length - 1,
                              1,
                              `${this.calArr.at(-1)}${sym}`
                          )
                        : this.calArr.splice(
                              this.calArr.length - 1,
                              1,
                              `${sym}`
                          );

                    break;
                case "+":
                case "-":
                case "x":
                case "÷":
                case "%":
                    if (this.calArr.length % 2 && this.calArr.at(-1) != "") {
                        this.calArr.push(sym);
                        this.calArr.push("");
                    }
                    break;
                case "=":
                    this.calArr = [`${this.GetValue(this.calArr)}`];
                    break;
                case "C":
                    this.calArr = [];
                    break;
                case "⬅":
                    if (this.calArr.length % 2 && this.calArr.at(-1) != "") {
                        this.calArr.splice(
                            this.calArr.length - 1,
                            1,
                            `${this.calArr
                                .at(-1)
                                .substr(0, this.calArr.at(-1).length - 1)}`
                        );
                    } else {
                        this.calArr.splice(this.calArr.length - 2, 2);
                    }
                    break;
            }
        },
        GetValue(arr) {
            let v = 0;
            for (let i = 0; i < arr.length; i += 2) {
                if (!i) v = Number(arr[i]);
                switch (arr[i - 1]) {
                    case "+":
                        v += Number(arr[i]);
                        break;
                    case "-":
                        v -= Number(arr[i]);
                        break;
                    case "x":
                        v = v * Number(arr[i]);
                        break;
                    case "÷":
                        v = v / Number(arr[i]);
                        break;
                    case "%":
                        v = v % Number(arr[i]);
                        break;
                }
            }
            return v;
        }
    }
};
</script>

<style lang="less">
* {
    overflow: hidden;
}
.phone-box {
    width: 375px;
    height: 700px;
    outline: auto;
    margin: 0 auto;
    box-shadow: 3px 6px 10px black;
    .calculotor {
        display: flex;
        flex-direction: column;
        gap: 8px;
        .input-box {
            height: 180px;
            width: 100%;
            text-align: right;
            box-shadow: inset 0 2px 4px gray;
            border: 16px solid transparent;
            padding: 0 6px;
            display: flex;
            align-items: flex-end;
            .input-value {
                width: 100%;
                word-break: break-all;
                white-space: normal;
                font-size: 24px;
            }
        }
        .red {
            color: rgba(255, 0, 0, 0.453);
        }
        .cal-row {
            width: 100%;
            display: flex;
            gap: 8px;
            padding: 0 16px;
            justify-content: space-between;
            .cal-btn {
                flex: 1;
                aspect-ratio: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                user-select: none;
                line-height: 0;
                border-radius: 9999px;
                background: #f1f3f5;
                font-size: 33px;
                cursor: pointer;
                &:hover {
                    background: #0091ff6d;
                    color: #f1f3f5;
                }
                &:active {
                    background: #0062ff5d;
                    color: #f1f3f5;
                }
            }
        }
        .foot-text {
            height: 50px;
            line-height: 50px;
            width: 100%;
            text-align: center;
            align-self: flex-end;
        }
    }
}
</style>
